<template>
  <div class="app-container">
    <div class="filter-container">
      <!-- <el-input v-model="adddata" placeholder="请输入内容" class="input-with-select" style="width: 400px;" clearable @clear="searchdata">
        <el-select slot="prepend" v-model="select" placeholder="请选择">
          <el-option label="姓名" value="1" />
          <el-option label="组别" value="2" />
          <el-option label="录取情况" value="3" />
        </el-select>
        <el-button slot="append" icon="el-icon-search" />
      </el-input> -->
      <el-row>
        <el-col :span="24">
          <el-select
            v-model="data.identity"
            placeholder="请选择"
            style="width:150px"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-input
            v-model="data.name"
            placeholder="输入姓名"
            style="width: 200px;"
            class="filter-item"
          />
          <el-autocomplete
            v-model="data.college"
            class="inline-input"
            :fetch-suggestions="querySearch"
            placeholder="请输入学院"
            @select="handleSelect"
          />
          <el-autocomplete
            v-model="data.field"
            class="inline-input"
            :fetch-suggestions="querySearchf"
            placeholder="请输入单位名称"
            @select="handleSelect"
          />
          <el-date-picker
            v-model="time"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
            clearable
          />
          <el-button
            class="filter-item but"
            type="primary"
            icon="el-icon-search"
            @click="searchdata"
          >
            搜索
          </el-button>
        </el-col>

        <!-- <el-input v-model="data.college" placeholder="输入学院" style="width: 200px;" class="filter-item" clearable @clear="searchcollege" /> -->
        <!-- <el-button class="filter-item but" type="primary" icon="el-icon-search" @click="searchcollege">
            Search
          </el-button> -->

        <!-- <el-input v-model="data.field" placeholder="输入场名" style="width: 200px;" class="filter-item" clearable @clear="searchfield" /> -->
        <!-- <el-button
            class="filter-item but"
            type="primary"
            icon="el-icon-search"
            @click="searchfield"
          >
            Search
          </el-button> -->
      </el-row>
      <el-row class="center">
        <el-col :span="6">
          <a
            href="http://210.42.37.244:8080/download"
          ><el-button
            type="primary"
            class="but"
          >下载<i class="el-icon-download el-icon--right" /></el-button>
          </a>
          <el-button
            type="primary"
            @click="getempty"
          >清空输入<i
            class="el-icon-refresh-left el-icon--right"
          /></el-button>
        </el-col>
      </el-row>

      <!-- <el-input v-model="data.time" placeholder="输入时间" style="width: 200px;" class="filter-item" clearable @clear="searchdata" />
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="searchdata">
        Search
      </el-button> -->
      <!-- <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
        Add
      </el-button> -->
      <!-- <a href="http://47.113.203.60:8081/download">
        <el-button :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download">
          export
        </el-button>
      </a> -->
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="ID" width="95">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="身份" align="center">
        <template slot-scope="scope">
          {{
            scope.row.identity === 1
              ? "本科生"
              : scope.row.identity === 2
                ? "外校生"
                : scope.row.identity === 3
                  ? "老师"
                  : "研究生"
          }}
        </template>
      </el-table-column>
      <el-table-column label="学号" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.stu_id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="姓名" align="center">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="学院" align="center">
        <template slot-scope="scope">
          {{ scope.row.identity === 2 ? scope.row.school : scope.row.college }}
        </template>
      </el-table-column>
      <el-table-column label="单位名称" align="center">
        <template slot-scope="scope">
          {{ scope.row.field }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="created_at"
        label="签到时间"
        width="200"
      >
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span>{{ scope.row.time | formatDate }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getList, formatDate, searchall } from '@/api/table'
import { searchcollege, searchfield } from '@/api/curd'
export default {
  filters: {
    // statusFilter(status) {
    //   const statusMap = {
    //     published: 'success',
    //     draft: 'gray',
    //     deleted: 'danger'
    //   }
    //   return statusMap[status]
    // }
    formatDate(time) {
      time = time.replace(/T/g, ' ')
      time = time.replace(/Z/g, ' ')
      var date = new Date(time)
      if (time !== '') {
        return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
      }
    }
  },
  data() {
    return {
      options: [{
        value: '1',
        label: '本科生'
      }, {
        value: '2',
        label: '外校生'
      }, {
        value: '3',
        label: '老师'
      }, {
        value: '4',
        label: '研究生'
      }],
      All: [],
      Allf: [],
      list: null,
      listLoading: true,
      rest: [],
      restaurants: [],
      data: {
        identity: '',
        name: '',
        college: '',
        field: ''
      },
      time: '',
      timedata: {
        time1: '',
        time2: ''
      },
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      }
    }
  },
  created() {
    this.fetchData()
    this.getdata()
    this.getdataf()
  },
  mounted() {
    this.rest = this.loadData()
    this.restaurants = this.loadDataf()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      getList().then(response => {
        console.log('response: ', response)
        this.list = response.data
        this.listLoading = false
      })
    },
    async searchdata() {
      if (this.time !== null) {
        this.timedata.time1 = formatDate(this.time[0], 'yyyy-MM-dd hh:mm:ss')
        this.timedata.time2 = formatDate(this.time[1], 'yyyy-MM-dd hh:mm:ss')
        console.log('this.timedata: ', this.timedata)
      } else {
        this.fetchData()
      }
      if (this.timedata.time1 !== 'NaN-aN-aN aN:aN:aN') {
        this.data.time1 = this.timedata.time1
        this.data.time2 = this.timedata.time2
      }
      console.log(this.data)
      const res = await searchall(this.data)
      console.log('res: ', res)
      this.list = res.data
    },
    querySearch(queryString, cb) {
      var rest = this.rest
      var results = queryString
        ? rest.filter(this.createFilter(queryString))
        : rest
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    createFilter(queryString) {
      return restaurant => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        )
      }
    },
    async getdata() {
      const res = await searchcollege()
      console.log('resss: ', res)

      res.data.forEach(item => {
        item.value = item.college
        this.All.push(item)
      })
      console.log('this.All: ', this.All)
    },
    loadData() {
      return this.All
    },
    handleSelect(item) {
      console.log(item)
    },
    querySearchf(queryString, cb) {
      var restaurants = this.restaurants
      var results = queryString
        ? restaurants.filter(this.createFilterf(queryString))
        : restaurants
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    createFilterf(queryString) {
      return restaurant => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        )
      }
    },
    async getdataf() {
      const res = await searchfield()
      console.log('resf: ', res)

      res.data.forEach(item => {
        item.value = item.field
        this.Allf.push(item)
      })
      console.log('this.Allf: ', this.Allf)
    },
    loadDataf() {
      return this.Allf
    },
    getempty() {
      const data = {
        identity: '',
        name: '',
        college: '',
        field: ''
      }
      const time = ''
      this.data = data
      this.time = time
      this.fetchData()
    }
  }
}
</script>
<style>
.but {
  margin-right: 10px;
}
.center {
  /* display: flex;
  justify-content:center;
  text-align: center; */
  margin: 10px 0;
}
</style>
